<template>
	<div class="container">
		<JxNavbar title='头条' />

		<div class="hot-title">
			<image :src="$surl('/hot/hotBig.png')" mode="heightFix"></image>
			<text>一览新鲜事！</text>
		</div>

		<div class="hot-box">
			<div class="hot-item" v-for="(item, index) in hotList" :key="item['_id']" @click="navigateTo(item['_id'])">
				<div class="item-top">
					<text>{{ tools.formatTen(index + 1) }}</text>
					<text class="uv-line-1">{{ item['title'] }}</text>
				</div>
				<div class="item-bot">
					<div class="bot-left">
						<view class="pv">
							<text>围观数</text>
							<text>{{ item['pv'] }}</text>
						</view>
						<view class="comment">
							<text>互动</text>
							<text>{{ item['comment_count'] }}</text>
						</view>
					</div>
					<!-- e16652f78b9c161b9e417d41a0d4abf6 -->
					<!-- <text class="school">{{ item['school']['name'] }}</text> -->
				</div>
			</div>
		</div>

		<AuxiliaryMenu />
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	import tools from '@/utils/tools/index.js'
	import articles from '@/api/articles/index.js'
	import JxNavbar from '@/components/navbar/index.vue'
	import AuxiliaryMenu from '@/components/AuxiliaryMenu/index.vue'

	const hotList = ref([])

	async function initData() {
		tools.loading('page');
		const response = await articles.hotList({ page: 1, limit: 10 });
		uni.hideLoading()
		if (response['code'] == 200) {
			hotList.value = response['data'];
		}
	}

	function navigateTo(id) {
		uni.navigateTo({
			url: '/pages/sub/main/detail/index?id=' + id
		})
	}

	initData()
</script>

<style lang="scss" scoped>
	.container {
		background: $uv-bg-color;
		padding: 0 $side-width;
		padding-bottom: 30rpx;

		.hot-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			border-radius: 22px;
			box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, .05);
			box-sizing: border-box;
			height: 88rpx;
			margin-top: $side-width;
			padding: 0 32rpx;

			image {
				height: 40rpx;
			}

			text {
				font-size: 28rpx;
				color: $uv-tips-color;
			}
		}

		.hot-box {
			.hot-item {
				background: #fff;
				border-radius: 22rpx;
				box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, .05);
				margin-top: $side-width;
				padding: 22rpx 32rpx;

				.item-top {
					display: flex;

					text:first-child {
						color: $uv-error;
						font-size: 34rpx;
						line-height: 52rpx;
						margin-right: 22rpx;
						flex-shrink: 1;
					}

					text:last-child {
						font-size: 32rpx;
						font-weight: 500;
						line-height: 52rpx;
					}
				}

				.item-bot {
					margin-top: 22rpx;
					padding-left: 65rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 26rpx;

					.bot-left {
						display: flex;
						align-items: center;

						.pv {
							color: $uv-error;
							display: flex;
							align-items: center;
							min-width: 220rpx;
							margin-right: 20rpx;

							text:last-child {
								font-weight: 500;
								padding-left: 2px;
							}
						}

						.comment {
							color: $uv-tips-color;
							display: flex;
							align-items: center;

							text:last-child {
								color: $uv-content-color;
								font-weight: 500;
								padding-left: 2px;
							}
						}
					}

					.school {
						font-size: 26rpx;
						color: $uv-tips-color;
					}
				}
			}
		}
	}
</style>